<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>连锁干洗中心业务管理系统</title>
    <%- include('css') %>
    <style>
        .layui-table-cell{
            height:100%;
        }
    </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <%- include('header') %>
        <%- include('menu') %>


        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>新闻管理</legend>
                </fieldset>

                <form name="form1" class="layui-form" action="">

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">新闻标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">创建日期</label>
                            <div class="layui-input-inline">
                                <input id="created_at" type="text" name="created_at" autocomplete="off" placeholder="请选择日期范围" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <table class="layui-hide" id="tablediv" lay-filter="tablediv"></table>
                </form>
                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="search">查询</button>
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="tonew">新建</button>

                  </div>
                </script>




            </div>
        </div>


        <%- include('footer') %>
    </div>
    <%- include('script') %>

    <script>
        var table;
        var vm = new Vue({
            el: '#app',
            mounted: function () {
                layui.use(['element', "table", 'form', 'laydate', 'laytpl'], function () {

                    var laydate = layui.laydate,
                        form = layui.form,
                        laytpl = layui.laytpl,
                        element = layui.element;
                    table = layui.table

                    $("#zixun").addClass("layui-nav-itemed");
                    $("#news").addClass("layui-this");


                    //日期组件绑定
                    laydate.render({
                        elem: '#created_at' //指定元素
                        ,range:'到'//开启范围选择，会出现两个日期选择器，文本会由自定义的字符连接，如2019-02-10 到 2020-01-10
                        ,theme: 'molv'//主题
                        // ,calendar: true//显示节假日
                    });

                    table.render({
                        elem: "#tablediv",
                        url: "/admin/news/datalist",
                        toolbar: '#toolbar',
                        cols: [
                            [{
                                    field: "id",
                                    title: "序号",
                                    type:'numbers',
                                },
                                {
                                    field: "pic",
                                    title: "封面图",
                                    width:150,
                                    templet:function (d) {
                                        var str = '';
                                        str = '<div><image style="height:100px;width:100px" src="'+d.pic+'"></image></div>';
                                        return str;
                                    }
                                },
                                {
                                    field: "title",
                                    title: "新闻标题",
                                },
                                {
                                    field: "created_at",
                                    title: "创建时间"
                                },
                                {
                                    field: "hits",
                                    title: "点击量"
                                },
                                {
                                    field: "status",
                                    title: "发布状态",
                                    sort: true,
                                    templet:function (d) {
                                        let str = '';
                                        if(d.status == '2'){
                                            str = '已发布'
                                        }else if(d.status == '1'){
                                            str = '未发布'
                                        }
                                        return str;
                                    }
                                },
                                {
                                    field: "is_recommend",
                                    title: "置顶状态",
                                    sort: true,
                                    templet:function (d) {
                                        let str = '';
                                        if(d.is_recommend == '1'){
                                            str = '已置顶'
                                        }else if(d.is_recommend == '0'){
                                            str = '未置顶'
                                        }
                                        return str;
                                    }
                                },
                                {
                                    fixed: 'right',
                                    title: '操作',
                                    width:300,
                                    templet:function (d) {
                                        let str = '';
                                        if(d.status == '1'){
                                            str = '<a class="layui-btn layui-btn-sm" lay-event="view">查看</a>' +
                                                '<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>' +
                                                '<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="post">发布</a>' +
                                                ' <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>' +
                                                ' <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="top">置顶</a>';
                                        }else if(d.status == '2'){
                                            str =
                                                '<a class="layui-btn layui-btn-sm" lay-event="view">查看</a>' +
                                                '<a class="layui-btn layui-btn-sm " lay-event="edit">编辑</a>' +
                                                '<a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="unpost">撤销</a> ' +
                                                '<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>' +
                                                ' <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="top">置顶</a>';
                                        }
                                        return str;
                                    }
                                }

                            ]
                        ],
                        page: true,

                    });


                    table.on('toolbar(tablediv)', function (obj) {

                            if (obj.event === 'tonew') {
                                layer.open({
                                    type: 2,
                                    title: false,
                                    area: ['1000px', '600px'],
                                    anim: 2,
                                    content: ['/admin/news/toadd'], //iframe的url，no代表不显示滚动条
                                    end: function () { //

                                    }
                                });
                            }
                        })

                    table.on('tool(tablediv)', function (obj) {

                        var data = obj.data;

                        if (obj.event === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                $.post(
                                    '/admin/news/del',
                                    {
                                        id: data.id
                                    }
                                    ,function (rs) {

                                    if (rs.code === '200') {

                                        layer.close(index);
                                        layer.msg('删除成功!')
                                        table.reload('tablediv', {
                                            where: { //设定异步数据接口的额外参数，任意设
                                            }
                                        });
                                    } else {
                                    }
                                });
                            });
                        } else if (obj.event === 'edit') {

                            layer.open({
                                type: 2,
                                title: false,
                                area: ['1000px', '500px'],
                                anim: 2,
                                content: ['/admin/news/toedit?id=' + data.id], //iframe的url，no代表不显示滚动条
                                end: function () { //此处用于演示

                                }
                            });
                        } else if (obj.event === 'post') {
                            layer.confirm('确定发布此新闻吗？', function (index) {
                                $.post('/admin/news/post',
                                    {
                                        id: data.id,
                                        status: '2'
                                    }
                                    ,function (rs) {
                                        if (rs.code === '200') {
                                            layer.close(index);
                                            layer.msg('发布成功!')
                                            table.reload('tablediv', {
                                                where: { //设定异步数据接口的额外参数，任意设
                                                    // title:
                                                }
                                            });
                                        } else {
                                            layer.close(index);
                                            layer.msg('发布失败!');
                                        }
                                    });
                            });
                        } else if (obj.event === 'unpost') {
                            layer.confirm('确定撤销发布此新闻吗？', function (index) {
                                $.post('/admin/news/post',
                                    {
                                        id: data.id,
                                        status: '1'
                                    }
                                    ,function (rs) {
                                        if (rs.code === '200') {
                                            layer.close(index);
                                            layer.msg('撤除成功!')
                                            table.reload('tablediv', {
                                                where: { //设定异步数据接口的额外参数，任意设
                                                    // title:
                                                }
                                            });
                                        } else {
                                            layer.close(index);
                                            layer.msg('撤除失败!');
                                        }
                                    });
                            });
                        } else if (obj.event === 'top') {
                            layer.confirm('确定置顶此新闻吗？', function (index) {
                                $.post('/admin/news/top',
                                    {
                                        id: data.id,
                                        is_recommend: '1'
                                    }
                                    ,function (rs) {
                                        if (rs.code === '200') {
                                            layer.close(index);
                                            layer.msg('置顶成功!')
                                            table.reload('tablediv', {
                                                where: { //设定异步数据接口的额外参数，任意设
                                                    // title:
                                                }
                                            });
                                        } else {
                                            layer.close(index);
                                            layer.msg('置顶失败!');
                                        }
                                    });
                            });
                        } else if (obj.event === 'view') {

                            layer.open({
                                type: 2,
                                title: false,
                                area: ['1000px', '500px'],
                                anim: 2,
                                content: ['/admin/news/todetail?id=' + data.id], //iframe的url，no代表不显示滚动条
                                end: function () { //此处用于演示

                                }
                            });
                        }
                    });


                    //查询按钮
                    form.on('submit(search)', function (data) {
                        table.reload('tablediv', {
                            where: { //设定异步数据接口的额外参数，任意设
                                title: data.field.title,
                                created_at: data.field.created_at
                                //…
                            },
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });

                        return false;
                    });




                })

            },
            methods: {
                iframeclose: function () {

                },

                iframesave: function () {

                    table.reload('tablediv', {
                        where: { //设定异步数据接口的额外参数，任意设

                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                },
                iframeupdate: function () {

                    table.reload('tablediv', {

                    });
                },
                // //form表单数据转json
                // serializeObject:function (form){
                //     var obj=new Object();
                //     $.each(form.serializeArray(),function(index,param){
                //         if(!(param.name in obj)){
                //             obj[param.name]=param.value;
                //         }
                //     });
                //     return obj;
                // },
                // //搜索条件
                // queryParams: function (params) {
                //     var data=serializeObject($("#search-form")); //获取form表单参数 JSON格式
                //     data.limit=params.limit;
                //     data.offset=params.offset;
                //     return data;
                // }

            }

        })
    </script>
</body>

</html>
